<template>
    <div>
        <h3>房型列表</h3>
        <hr>
        房型名称
        <input type="text" v-model="can.houstType">
        房型面积
        <input type="text" v-model="can.a1">-<input type="text" v-model="can.a2">
        <input type="button" value="查询" class="btn btn-primary" @click="show">

        <input type="button" value="批量删除" @click="delall" class="btn btn-danger">
        <input type="button" value="批量发布" @click="updall(1)" class="btn btn-primary">
        <input type="button" value="批量不发布" @click="updall(0)" class="btn btn-primary">
        <hr>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="checkbox" @click="headall">
                    </td>
                    <td>房型名称</td>
                    <td>房型图片</td>
                    <td>面积</td>
                    <td>是否有窗</td>
                    <td>入住人数</td>
                    <td>单价</td>
                    <td>状态</td>
                    <td>创建时间</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list">
                    <td>
                        <input type="checkbox" @change="bodyall" v-model="ids" :value="item.Id">
                    </td>
                    <td>{{ item.HouseTypeName }}</td>
                    <td>
                        <img :src="item.Photo" width="150" height="100">
                    </td>
                    <td>{{ item.Area }}</td>
                    <td>{{ item.IsWindow == 1 ? "有" : "否" }}</td>
                    <td>{{ item.Count }}</td>
                    <td>{{ item.Price }}</td>
                    <td>
                        <span v-if="item.State==1" style="color: skyblue;">发布</span>
                        <span v-if="item.State==0" style="color: darkmagenta;">不发布</span>
                    </td>
                    <td>{{ moment(item.CreateTime).format("YYYY-MM-DD") }}</td>
                    <td>
                        
                        <input type="button" value="详情" @click="detail(item.Id)" class="btn btn-primary">
                        <input type="button" value="修改" class="btn btn-success" @click="update(item.Id)">
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)">
                        <input type="button" value="发布" v-if="item.State==0" class="btn btn-warning" @click="upd(item.Id,1)">
                        <input type="button" value="不发布" v-if="item.State==1" class="btn btn-warning" @click="upd(item.Id,0)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共<b>{{ data.totalCount }}</b>条</span>
        <span>共<b>{{ data.totalPage }}</b>页</span>
        <span>当前第<b>{{ can.pageIndex }}/{{ data.totalPage }}</b>页</span>

        <select v-model="can.pageSize" @change="show">
            <option :value="item" v-for="item in ye" :key="item">每页显示{{ item }}条</option>
        </select>

        <input type="button" value="首页" class="btn" @click="gopage(1)">
        <input type="button" value="上一页" class="btn" @click="gopage(can.pageIndex - 1)">

        <span v-for="item in data.totalPage" @click="gopage(item)">{{ item }}</span>

        <input type="button" value="下一页" class="btn" @click="gopage(can.pageIndex + 1)">
        <input type="button" value="尾页" class="btn" @click="gopage(data.totalPage)">

        <input type="text" v-model="can.pageIndex">
        <input type="button" value="跳转" @click="gopage(can.pageIndex)" class="btn btn-warning">


    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, useSlots } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment';
import axios from 'axios';
const route = useRoute();
const router = useRouter();

let can: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    houstType: "",
    a1:"",
    a2:"",
})
let data: any = reactive({
    list: [],
    totalCount: 0,
    totalPage: 0
})
let ye: any = ref(
    [2, 4, 6, 8]
)
let checkbox = ref();
let ids = ref([]);
onMounted(() => {
    GetHouse();
})
//修改
const update=(id:any)=>{
    router.push({
        path:"/houseTypeUpdate",
        query:{
            id:id
        }
    })
}


//跳转到详情页
const detail=(id:any)=>{
    router.push({
        path:"/housetypedetail",
        query:{
            id:id
        }
    })
}


//批量发布
const updall= (state:any) => {
    if(ids.value.length==0){
        alert('至少选中一个');
        return;
    }
    if (confirm('确定修改吗')) {
        axios({
            method: "get",
            url: "/api/House/UpdHouseType",
            params: {
                ids: ids.value.toString(),
                state:state
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('修改成功');
                    ids.value=[];
                    checkbox.value="";
                    show();
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}

//批量发布
const upd= (id:any,state:any) => {
    if (confirm('确定修改吗')) {
        axios({
            method: "get",
            url: "/api/House/UpdHouseType",
            params: {
                ids: id,
                state:state
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('修改成功');
                    ids.value=[];
                    checkbox.value="";
                    show();
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}

//批量删除
const delall = () => {
    if (confirm('确定删除吗')) {
        axios({
            method: "delete",
            url: "/api/House/DelHouseType",
            params: {
                ids: ids.value.toString()
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('删除成功');
                    ids.value=[];
                    checkbox.value="";
                    show();
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}
//单个删除
const del = (id:any) => {
    if (confirm('确定删除吗')) {
        axios({
            method: "delete",
            url: "/api/House/DelHouseType",
            params: {
                ids:id
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('删除成功');
                    ids.value=[];
                    checkbox.value="";
                    show();
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}

const show = () => {
    can.pageIndex = 1;
    GetHouse();

}

//全选全不选
const headall = () => {
    checkbox.value = !checkbox.value;
    if (checkbox.value == true) {
        ids.value = data.list.map((item: any) => {
            return item.Id
        })
    }
    else {
        ids.value = [];
    }
}
//反选
const bodyall = () => {
    if (ids.value.length == data.list.length) {
        checkbox.value = true;
    }
    else {
        checkbox.value = false;
    }
}

//翻页
const gopage = (num: any) => {
    if (num < 1) {
        can.pageIndex = 1;
        return;
    }
    if (num > data.totalPage) {
        can.pageIndex = data.totalPage;
        return;
    }
    can.pageIndex = num;
    GetHouse();
    return;

}


//获取房型
const GetHouse = () => {
    axios({
        method: "get",
        url: "/api/House/GetHouseTypeList",
        params: can
    })
        .then(res => {
            data.list = res.data.list;
            data.totalCount = res.data.totalCount;
            data.totalPage = res.data.totalPage;
        })
        .catch(err => {
            console.log(err);
        })
}



</script>

<style scoped>
b {
    color: red;
}

input {
    margin: 0 10px;
}

span {
    margin: 0 7px;
}
</style>